<template>
	<div class="main-con">
		<el-row class="head-con" :gutter="10">
			<el-col :span="4" :offset="0" class="head-col">
				<div class="count-item">
					<div class="item">
						<div class="left-con bg1">
							<img class="left-img img-1" src="@/assets/image/serverRoom/jfzs.svg" />
						</div>
						<div class="right-info">
							<h1>{{ sumCount.COMPUTERROOMCOUNT ? sumCount.COMPUTERROOMCOUNT : 0 }}</h1>
							<div>机房总数</div>
						</div>
					</div>
				</div>
				<el-tooltip effect="light" content="指在本系统内的机房总数" placement="top">
					<img class="img-q" src="@/assets/image/serverRoom/question.svg" />
				</el-tooltip>
			</el-col>
			<el-col :span="4" :offset="0" class="head-col">
				<div class="count-item">
					<div class="item">
						<div class="left-con bg2">
							<img class="left-img img-2" src="@/assets/image/serverRoom/djsl.svg" />
						</div>
						<div class="right-info">
							<h1>{{ sumCount.ADDASSETCOUNT ? sumCount.ADDASSETCOUNT : 0 }}</h1>
							<div>登记资产数量</div>
						</div>
					</div>
				</div>
				<el-tooltip effect="light" content="指本系统登记的资产总数" placement="top">
					<img class="img-q" src="@/assets/image/serverRoom/question.svg" />
				</el-tooltip>
			</el-col>
			<el-col :span="4" :offset="0" class="head-col">
				<div class="count-item">
					<div class="item">
						<div class="left-con bg3">
							<img class="left-img img-3" src="@/assets/image/serverRoom/zcgl.svg" />
						</div>
						<div class="right-info">
							<h1>{{ sumCount.ASSETCOUNT ? sumCount.ASSETCOUNT : 0 }}</h1>
							<div>资产总数</div>
						</div>
					</div>
				</div>
				<el-tooltip effect="light" content="包含登记资产数量及动力环境的资产数量总和" placement="top">
					<img class="img-q" src="@/assets/image/serverRoom/question.svg" />
				</el-tooltip>
			</el-col>
			<el-col :span="4" :offset="0" class="head-col">
				<div class="count-item">
					<div class="item">
						<div class="left-con bg4">
							<img class="left-img img-4" src="@/assets/image/serverRoom/jkx.svg" />
						</div>
						<div class="right-info">
							<h1>{{ sumCount.MONICOUNT ? sumCount.MONICOUNT : 0 }}</h1>
							<div>监控项</div>
						</div>
					</div>
				</div>
				<el-tooltip effect="light" content="指所有资产监控项的总合，一个资产可能会有多个监控项" placement="top">
					<img class="img-q" src="@/assets/image/serverRoom/question.svg" />
				</el-tooltip>
			</el-col>
			<el-col :span="4" :offset="0" class="head-col">
				<div class="count-item">
					<div class="item">
						<div class="left-con bg5">
							<img class="left-img img-5" src="@/assets/image/serverRoom/zczq.svg" />
						</div>
						<div class="right-info">
							<h1>{{ sumCount.NORMALCOUNT ? sumCount.NORMALCOUNT : 0 }}</h1>
							<div>正常数</div>
						</div>
						<el-tooltip effect="light" content="指资产所有监控项中正常监控项的总和" placement="top">
							<img class="img-q" src="@/assets/image/serverRoom/question.svg" />
						</el-tooltip>
					</div>
				</div>
			</el-col>
			<el-col :span="4" :offset="0" class="head-col">
				<div class="count-item">
					<div class="item">
						<div class="left-con bg6">
							<img class="left-img img-6" src="@/assets/image/serverRoom/ycgj.svg" />
						</div>
						<div class="right-info">
							<h1>{{ sumCount.ABNORMALCOUNT ? sumCount.ABNORMALCOUNT : 0 }}</h1>
							<div>异常数</div>
						</div>
					</div>
				</div>
				<el-tooltip effect="light" content="指资产所有监控项中异常监控项的总和" placement="top">
					<img class="img-q" src="@/assets/image/serverRoom/question.svg" />
				</el-tooltip>
			</el-col>
		</el-row>
		<el-row class="row-con" :gutter="10">
			<el-col class="bottom-col" :span="10" :offset="0">
				<div class="card">
					<div class="card-title">资产状态统计</div>
					<div class="chart-con">
						<pie-chart :chartData="statusData" />
					</div>
				</div>
			</el-col>
			<el-col class="bottom-col" :span="14" :offset="0">
				<div class="card">
					<div class="card-title">
						<div>
							登记资产统计
						</div>
						<div>
							登记资产总数：<span style="color: rgba(33, 183, 149, 1);">{{ assetTotalCount }}</span>
						</div>
					</div>
					<div class="chart-con">
						<axis-chart :chartData="assetCount"></axis-chart>
					</div>
				</div>
			</el-col>
		</el-row>
		<el-row class="row-con" :gutter="10">
			<el-col class="bottom-col" :span="10" :offset="0">
				<div class="card">
					<div class="card-title">在架资产统计</div>
					<div class="chart-con">
						<pie-chart :chartData="upAsset" />
					</div>
				</div>
			</el-col>
			<el-col class="bottom-col" :span="14" :offset="0">
				<div class="card">
					<div class="card-title">告警占比统计</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>
<script>
	import AxisChart from '../components/chart/AxisChart'
	import PieChart from '../components/chart/PieChart'
	import assetStatisticApi from '@/api/assetStatisticApi'
	import { getAction, postAction } from '@/utils/httpUtil'
	export default {
		name: 'assetStatistic',
		components: {
			PieChart,
			AxisChart,
		},
		data() {
			return {
				sumCount: {
					COMPUTERROOMCOUNT: 0,
					ADDASSETCOUNT: 0,
					ASSETCOUNT: 0,
					NORMALCOUNT: 0,
					MONICOUNT: 0,
					ABNORMALCOUNT: 0,
				},
				statusData: [],
				upAsset: [],
				assetCount: [[], []],
				assetTotalCount: 0,
			}
		},
		mounted() {
			this.loadAssetCount()
			this.loadStateCount()
			this.loadPutCount()
			this.loadRegisterCount()
		},
		methods: {
			loadAssetCount() {
				getAction(assetStatisticApi.stateCount).then(res => {
					if (res.success) {
						this.statusData = res.info
					}
				})
			},
			loadStateCount() {
				getAction(assetStatisticApi.assetIndexCount).then(res => {
					if (res.success) {
						this.sumCount = Object.assign(this.sumCount, res.info)
					}
				})
			},
			loadPutCount() {
				getAction(assetStatisticApi.putOnCount).then(res => {
					if (res.success) {
						this.upAsset = res.info
					}
				})
			},
			loadRegisterCount() {
				getAction(assetStatisticApi.registerCount).then(res => {
					if (res.success) {
						if (res.info && res.info.length > 0) {
							let name = []
							let value = []
							res.info.forEach(el => {
								name.push(el.name)
								value.push(el.value)
							})
							this.assetCount = [name, value]
						}
						this.assetTotalCount = res.totalCount
					}
				})
			},
		},
	}
</script>
<style lang="scss" scoped>
	.head-con {
		height: 104px;
	}

	.head-col {
		position: relative;
	}

	.count-item {
		height: 104px;
		background: #ffffff;
		box-shadow: 0px 0px 12px 0px rgba(129, 155, 151, 0.3);
		border-radius: 6px;
		display: flex;
	}

	.item {
		height: 64px;
		margin: auto;
		display: flex;
	}

	.left-con {
		width: 64px;
		height: 64px;
		border-radius: 50%;
		text-align: center;
	}

	.bg1 {
		background: linear-gradient(-28deg, #4089fa, #5dbeff);
	}

	.bg2 {
		background: linear-gradient(-28deg, #ff9c3b, #ffca3f);
	}

	.bg3 {
		background: linear-gradient(-28deg, #22b6de, #33e4da);
	}

	.bg4 {
		background: linear-gradient(-28deg, #8669fb, #cb88ff);
	}

	.bg5 {
		background: linear-gradient(-28deg, #11bd72, #39f1dd);
	}

	.bg6 {
		background: linear-gradient(-28deg, #fa4141, #fe6186);
	}

	.right-info {
		text-align: left;
		margin-left: 15px;
		margin-top: 5px;
		height: 64px;

		div {
			color: rgba(153, 153, 153, 1);
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 16px;
		}

		h1 {
			font-size: 26px;
			color: #333333;
		}
	}

	.img-q {
		position: absolute;
		width: 20px;
		height: 20px;
		color: rgba(180, 180, 180, 1);
		top: 6px;
		right: 12px;
		cursor: pointer;
	}

	.left-img {
		width: 27px;
		height: 27px;
		margin-top: 18px;
	}

	.img-1 {
		box-shadow: 2px 6px 5px 0px rgba(25, 90, 166, 0.23);
	}

	.img-2 {
		box-shadow: 2px 6px 5px 0px rgba(140, 63, 0, 0.23);
	}

	.img-3 {
		box-shadow: 2px 6px 5px 0px rgba(25, 90, 166, 0.23);
	}

	.img-4 {
		box-shadow: 2px 6px 5px 0px rgba(73, 39, 186, 0.23);
	}

	.img-5 {
		box-shadow: 2px 6px 5px 0px rgba(0, 125, 77, 0.23);
	}

	.img-6 {
		box-shadow: 2px 6px 5px 0px rgba(217, 0, 12, 0.23);
	}

	.row-con {
		height: calc(50% - 62px);
		margin-top: 10px;
	}

	.bottom-col {
		height: 100%;
	}

	.card {
		background: #ffffff;
		box-shadow: 0px 0px 12px 0px rgba(129, 155, 151, 0.3);
		border-radius: 10px;
		height: 100%;
		padding: 8px;
		text-align: left;
	}

	.card-title {
		border-left: 2px solid rgba(33, 183, 149, 1);
		padding-left: 10px;
		display: flex;
		justify-content: space-between;
		height: 20px;
		align-items: center;
	}
	.chart-con {
		margin: 10px 0;
		height: calc(100% - 40px);
	}
</style>
